<!DOCTYPE html>
<html lang="en">	<head>		
<title>three.js webgl - geometry - cube</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script> 
	<style>			
		body {				
			margin: 0px;				
			background-color: #000000;				
			overflow: hidden;
		}
		button{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		font-size:72px;
		opacity:.5;
		}
	</style>
</head>
<body>
	<script src="three.min.js"></script>
	<script src="stats.min.js"></script>
	<script src="Detector.js"></script>
	<script src='threex.rendererstats.js'></script>
	<script>
	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			var camera, scene, renderer, stats, rendererStats;			
			var mesh;
			init();
			animate();
			function init() {
			 
				renderer = new THREE.WebGLRenderer({ antialias: true });
				renderer.setSize( window.innerWidth, window.innerHeight );	
				document.body.appendChild( renderer.domElement );
				//
				
				stats = new Stats();
				
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.right = '0px';
				stats.domElement.style.zIndex = 100;
				document.body.appendChild(stats.domElement);
				//
				rendererStats   = new THREEx.RendererStats();
				rendererStats.domElement.style.position = 'absolute';
rendererStats.domElement.style.left = '0px';
rendererStats.domElement.style.bottom   = '0px';
document.body.appendChild( rendererStats.domElement )
				//
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 400;
				scene = new THREE.Scene();
				var geometry = new THREE.BoxGeometry( 200, 200, 200,100,200,100);
				var texture = THREE.ImageUtils.loadTexture( 'crate.gif' );
				texture.anisotropy = renderer.getMaxAnisotropy();
				var material = new THREE.MeshBasicMaterial( { map: texture } );
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
				//
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
				console.log(window.innerWidth+" "+window.innerHeight);
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			function animate() {
				requestAnimationFrame( animate );
				mesh.rotation.x += 0.005;
				mesh.rotation.y += 0.01;
				renderer.render( scene, camera );
				stats.update();
				rendererStats.update(renderer);
			}
			function invoke(){
				console.log("full");
				launchFullScreen(document.documentElement);
			}
			function launchFullScreen(element) {
				if(element.requestFullscreen) {
					element.requestFullscreen();
				} else if(element.mozRequestFullScreen) { 
				element.mozRequestFullScreen();
				} else if(element.webkitRequestFullscreen) {
				 element.webkitRequestFullscreen();
				 } else if(element.msRequestFullscreen) { 
				 element.msRequestFullscreen(); 
				 }
			}
		</script>
		<button onclick="invoke()">hello</button>
	</body>
</html>